<template>
    <div class="wy-main business-car-manage wei_system_user">
     <a-row class="wy-main-title">
       <a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >系统用户管理</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
	   </a-row>
     <div class="my-main-cont">
     <a-form layout="inline">
        <a-row style="margin-bottom:20px;">
          <a-form-item  label="姓名" style="margin-right:26px;" class="wei_name">
            <a-input v-model="nickName"  placeholder='请输入姓名'   />
          </a-form-item>
          <a-form-item label="部门" class="wei_user" >
             <a-tree-select style="min-width:174px"
                :allowClear="true"
                :dropdownStyle="{ maxHeight: '220px', overflow: 'auto',minWidth:'174px'}"
                :treeData="deptList"
                v-model="deptId"
                placeholder="请选择部门"
                @change="changeDept">
              </a-tree-select>
          </a-form-item>
          <a-form-item label="角色" class="wei_name">
              <a-select showSearch v-model="roleId"  style="min-width:174px" placeholder="全部">
                <a-select-option key="1" value="">全部</a-select-option>
                       <a-select-option v-for="(itme,index) in roleList" :key="index" :value="itme.roleId">
            {{itme.roleName}}
            </a-select-option>
              </a-select>
            </a-form-item>
        </a-row>
        <a-row style="margin-bottom:20px;">
        <a-form-item
                label="创建日期"
                :labelCol="{span: 5}"
                :wrapperCol="{span: 18, offset: 1}">
                <range-date @change="handleDateChange" ref="createTime"></range-date>
          </a-form-item>
          <a-form-item  label="手机号码" style="float:left;">
              <a-input v-model="mobile"  placeholder='请输入手机号码'   />
            </a-form-item>
          <a-button type="primary" style="margin-left: 10px;"  @click="getSupplyInfo">查询</a-button>
         <a-button style="margin-left: 10px;" @click="reset">重置</a-button>
        </a-row>
  
				 <a-row style="margin-bottom:20px;text-align:right;">
          <a-button class="title-button" type="primary" style="float:left;"  @click="addUser()">创建用户</a-button>
<!--          <a-button class="title-button" type="primary"  @click="exportInfo()">导出</a-button>
          <a-button class="title-button" type="primary" style="margin-left:10px;"  @click="sendInfo()">发送消息</a-button> -->

          <!-- <a-button class="title-button" type="primary"  @click="deleteAll()">删除</a-button> -->
         </a-row>
    </a-form>
         <a-table :columns="columns" @change="handleTableChange" :rowKey="record=> record.userId" :dataSource="data"  :pagination="pagination" :loading="loading"  :rowSelection="{selectedRowKeys: selectedRowKeys,onChange:onSelectChange }" style="margin-top: 20px " >
					 <!-- :rowSelection="rowSelection" -->
         <span slot="fromCity" slot-scope="text, record">
				{{record.fromCity}}-{{record.toCity}}
			   </span>
          <span slot="status" slot-scope="text, record">
                <span v-if="record.status==0" href="javascript:;">禁用</span>
                <span v-if="record.status==1" href="javascript:;">有效</span>
           </span>
            <span slot="ssex" slot-scope="text, record">
                <span v-if="record.ssex==2" href="javascript:;">保密</span>
                <span v-if="record.ssex==0" href="javascript:;">男</span>
                <span v-if="record.ssex==1" href="javascript:;">女</span>
           </span>
				 <span slot="approvalStatus" slot-scope="text, record">
	   						<a  class="wei_primary" href="javascript:;" @click="edit(record,'add')">查看</a>
						    <a  class="wei_primary" href="javascript:;" @click="edit(record,'edit')">修改</a>
                <!-- <a  class="wei_primary" href="javascript:;" @click="dele(record)">删除</a> -->
		     </span>
         <span slot="createTime" slot-scope="text, record">
                <span v-if="!!record.createTime">{{record.createTime.split(" ")[0]}}</span>

              </span>
				 </a-table>
<!--           <div style="margin-top: -50px" >
            <a-button @click="delVehicles">删除所选</a-button>
          </div>  -->
					<a-modal title="修改" :visible="visible" @cancel="handleCancel" width="1000px" :maskClosable='false' :footer="null"  >
			     <publish-form v-if="visible"  :type="type" :detail="detail" @cancel="handleCancel"></publish-form>
	      	</a-modal>
          <a-modal title="创建用户" :visible="visibleAll" @cancel="handleCancel" width="1000px" :maskCosable='false' :footer="null"  >
           <publish-all v-if="visibleAll"  @cancel="handleCancel"></publish-all>
          </a-modal>
          <a-modal title="查看" :visible="visibleSee" @cancel="handleCancel" width="1000px" :maskClosable='false' :footer="null"  >
           <look-it v-if="visibleSee" :detail="detail" @cancel="handleCancel"></look-it>
          </a-modal>
     </div>
    </div>
</template>
<script>
import PublishForm from './PublishForm'
import PublishAll from './PublishAll'
import LookIt from './LookIt'

import RangeDate from '@/components/datetime/RangeDate'
	const columns = [{
			title: '登录名',
			dataIndex: 'username',
		},
		{
			title: '姓名',
			dataIndex: 'nickName',
		},
		{
			title: '性别',
			dataIndex: 'ssex',
			scopedSlots: {
				customRender: 'ssex'
			},
		},
    {
      title: '手机号码',
      dataIndex: 'mobile',
    },
    {
      title: '部门',
      dataIndex: 'deptName',
    },
    {
      title: '职务',
      dataIndex: 'jobName',
    },
        {
      title: '角色',
      dataIndex: 'roleName',
    },
        {
      title: '用户状态',
      dataIndex: 'status',
       scopedSlots: {
        customRender: 'status'
      },
    },
		{
			title: '创建日期',
			dataIndex: 'createTime',
			scopedSlots: {
				customRender: 'createTime'
			},
		},
		{
			title: '操作',
			key: 'approvalStatus',
			scopedSlots: {
				customRender: 'approvalStatus'
			},
		}
	];


// const rowSelection = {
//   onChange: (selectedRowKeys, selectedRows) => {
// 		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// 		// this.selectedRowKeys = selectedRowKeys
// 		// console.log(selectedRowKeys)
//   }
// }
export default {
    data() {
        return {
				 deptId: '',
        isSee:true,
        nickName:'',
        company:'',
        mobile:'',
        roleId:'',
        contentType:'',
        createTimeFrom:'',
        createTimeTo:'',
          exportAll:[],
         sendAll:[],
         deleAll:[],
         deptList:[],
         roleList:[],
				 detail: {},
				 data:[],
				 columns,
				 loading: false,
				 visible:false,
				 visibleAll:false,
         visibleSee:false,
				 cargoTitle: '',
         // rowSelection,
        pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          total:10,
          showSizeChanger: true,
          showTotal: (total, range) => `共 ${total} 条记录`
        },
					selectedRowKeys: [],
        }
		},
		mounted:function () {
			
		},
		components: {
			PublishForm,
      PublishAll,
      RangeDate,
      LookIt
		},
		created() {
			this.getSupplyInfo()
      this.deptSearch()
      this.roleSearch()
		},
    methods: {
      //批量删除
      deleteAll(){
          this.deleAll =[];
          if(this.selectedRowKeys.length){
            this.visibleAll = true;
            let logIds = [];
           for(var i=0;i<this.selectedRowKeys.length;i++){
            logIds.push({"userId":this.selectedRowKeys[i]})
           }
            this.deleAll = logIds;
          }else{
            this.$message.error('请选择需要删除的用户!')
          }
      },
     //导出
      exportInfo(){
        this.exportAll =[];
          if(this.selectedRowKeys.length){
            this.visibleAll = true;
            let logIds = [];
           for(var i=0;i<this.selectedRowKeys.length;i++){
            logIds.push({"userId":this.selectedRowKeys[i]})
           }
            this.exportAll = logIds;
          }else{
            this.$message.error('请选择需要导出的用户!')
          }
      },
      //发送消息
      sendInfo(){
         this.sendAll =[];
           if(this.selectedRowKeys.length){
            this.visibleAll = true;
            let logIds = [];
           for(var i=0;i<this.selectedRowKeys.length;i++){
            logIds.push({"userId":this.selectedRowKeys[i]})
           }
            this.sendAll = logIds;
          }else{
            this.$message.error('请选择需要发送消息的用户!')
          }
      },

			handleCancel(e) {
				this.visible = false
			this.visibleAll = false
      this.visibleSee = false
      this.getSupplyInfo();
      this.selectedRowKeys=[];
			},
    changeDept(value){
       // 切换部门
        this.deptId = value
      },

             //查询部门列表
      deptSearch(){
        this.$get('/dept/', {},true).then((r) => {
          if(r.status == 200){
            this.deptList = r.data.rows.children
            console.log(this.deptList)
          }else{
            this.$message.error(r.data.message);
          }
          this.loading = false;
        }).catch((e) => {
          this.loading = false;
        })
      },
      //查询角色列表
      roleSearch(){
        this.$get('/role/open/getSystemUserRole/', {},true).then((r) => {
          if(r.status == 200){
            this.roleList = r.data.data
          }else{
            this.$message.error(r.data.message);
          }
          this.loading = false;
        }).catch((e) => {
          this.loading = false;
        })
      },
			//修改回调关闭
			editHandleCancel (e){
				this.getSupplyInfo();
				this.handleCancel();
			},
      //创建用户
      addUser(){
        this.visibleAll = true
      },
			 seeAllInfo(){
        if(this.selectedRowKeys.length){
            this.visibleAll = true;
            let logIds = [];
           for(var i=0;i<this.selectedRowKeys.length;i++){
            logIds.push({"userId":this.selectedRowKeys[i]})
           }
            this.datailAll = logIds;
          }else{
            this.$message.error('请选择需要导出的用户!')
          }
      
      },
        handleDateChange (value) {
      if (value) {
        this.createTimeFrom = value[0]
        this.createTimeTo = value[1]
      }
    },
          // 删除单条信息
      dele(data){

        let that = this
        this.$confirm({
          title: '确定删除所选中的记录?',
          content: '当您点击确定按钮后，这些记录将会被彻底删除',
          centered: true,
          onOk () {
           var params ={
            userId:data.userId,
            status:data.status
           }
            that.$put('/userinfo/',params,true).then(() => {
              that.$message.success('删除成功')
              that.selectedRowKeys = []
              that.gettenderinginfo()
            })
          },
          onCancel () {
            that.selectedRowKeys = []
          }
        })
      },
			// 取消按钮
			// cancleShowModal() {
			// 	this.visible = false
			// },
				// 编辑货物信息
			edit(data,type){
				this.type = type
        if(this.type == 'add'){
          this.isSee = true
          this.visibleSee = true
        }else{
          this.isSee = false
          this.visible = true
        }
				this.detail = data
				
			},
			//删除
			 delVehicles() {
        this.$confirm({
					title: '确定删除所选中的记录？',
					content: '当您点击确定按钮后，这些记录将会被彻底删除',
					centered: true
				})
      },

			// 重置
			reset () {
		    this.pagination.defaultCurrent = 1
        this.mobile = ''
        this.roleId = ''
        this.deptId = ''
        this.nickName =''
        this.createTimeFrom = ''
        this.createTimeTo = ''
        this.$refs.createTime.reset()
        this.getSupplyInfo();
        this.selectedRowKeys=[];
			},
				// 获取货源信息
			getSupplyInfo(params = {}) {
				this.loading = true
         params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent

        if(this.nickName!=''){
            params.nickName = this.nickName
        }

        if(this.mobile!=''){
            params.mobile = this.mobile
        }

         if(this.roleId!=''){
          params.roleId = this.roleId
        }

         if(this.deptId!=''){
              params.deptId = this.deptId
        }

         if(this.createTimeFrom!=''){
              params.createTimeFrom = this.createTimeFrom
        }

         if(this.createTimeTo!=''){
              params.createTimeTo = this.createTimeTo
        }
				this.$get('/user/getSystemUserList',params).then((r) => {
						console.log(r)
						this.loading = false
						this.data = r.data.data.rows
						this.pagination.total = r.data.data.total
					})
					.catch((e) => {
						console.log(e)
						this.loading = false;
					})
			},
			               // 表格排序 分页 筛选事件
      handleTableChange(pagination, filters, sorter) {
         this.pagination.defaultPageSize = pagination.pageSize
         this.pagination.defaultCurrent  = pagination.current
         this.getSupplyInfo();
        // this.getcarSource({
        //   ...this.queryParams
        // })
      },
 			onSelectChange (selectedRowKeys) {
          console.log('selectedRowKeys changed: ', selectedRowKeys);
          this.selectedRowKeys = selectedRowKeys
        },

    }
}
</script>

<style lang="less">

</style>